<template>
	<div class="admin">
		
	<el-row class="container">
		<v-head></v-head>
	   <el-row :gutter="20" class="main">
					<el-col :span="4" class="el-menu" v-show="!collapsed">
						
						<!--导航-->
						<el-menu class="el-menu-vertical-demo">

							<template v-for="(item,index) in menuList" v-if="!item.hidden">
								<el-submenu :index="item.path" v-if="!item.leaf">
									<template slot="title"><i class="el-icon-message"></i>{{item.name}}</template>
									<el-menu-item-group>
										<!--  <template slot="title">{{item.name}}</template>-->
										<el-menu-item v-for="child in item.children" v-on:click="getMenu(child.url)" :index="item.path+'-'+child.path" :key="child.path" v-if="!child.hidden">{{child.name}}</el-menu-item>
									</el-menu-item-group>
									<!--<el-menu-item-group title="分组2">
		          <el-menu-item index="1-3">权限设置</el-menu-item>
		        </el-menu-item-group>
		        <el-submenu index="1-4">
		          <template slot="title">选项4</template>
		          <el-menu-item index="1-4-1">选项1</el-menu-item>
		        </el-submenu>-->
								</el-submenu>
								<el-menu-item v-if="item.leaf&&item.children.length>0" :index="item.path" v-on:click="getMenu(item.children[0].url)">
									<i class="el-icon-menu"></i>{{item.children[0].name}}</el-menu-item>
							</template>

							<!--		  	  
		      <el-submenu index="1">
		        <template slot="title"><i class="el-icon-message"></i>用户管理</template>
		        <el-menu-item-group>
		          <template slot="title">会员管理</template>
		          <el-menu-item index="1-1">选项1</el-menu-item>
		          <el-menu-item index="1-2">选项2</el-menu-item>
		        </el-menu-item-group>
		        <el-menu-item-group title="分组2">
		          <el-menu-item index="1-3">权限设置</el-menu-item>
		        </el-menu-item-group>
		        <el-submenu index="1-4">
		          <template slot="title">选项4</template>
		          <el-menu-item index="1-4-1">选项1</el-menu-item>
		        </el-submenu>
		      </el-submenu>
		      <el-menu-item index="2"><i class="el-icon-menu"></i>权限设置</el-menu-item>
		      <el-menu-item index="3"><i class="el-icon-setting"></i>数据库管理</el-menu-item>
		      <el-menu-item index="4"><i class="el-icon-setting"></i>文章管理</el-menu-item>
		      <el-menu-item index="5"><i class="el-icon-setting"></i>栏目管理</el-menu-item>
		      <el-menu-item index="6"><i class="el-icon-setting"></i>广告管理</el-menu-item>
		      <el-menu-item index="7"><i class="el-icon-setting"></i>公告管理</el-menu-item>
		      <el-menu-item index="8"><i class="el-icon-setting"></i>网站设置</el-menu-item>-->
						</el-menu>

					</el-col>

					<!--导航菜单-折叠后-->
					<ul class="el-menu el-menu-vertical-demo collapsed" v-show="collapsed" ref="menuCollapsed">
						<li v-for="(item,index) in menuList" class="el-submenu item">
							<div class="el-submenu__title" style="padding-left: 20px;" @mouseover="showMenu(index,true)" @mouseout="showMenu(index,false)">
								<i :class="item.iconCls"></i>
							</div>
							<ul class="el-menu submenu" :class="'submenu-hook-'+index" @mouseover="showMenu(index,true)" @mouseout="showMenu(index,false)">
								<li v-for="child in item.children" class="el-menu-item" v-on:click="getMenu(child.url)" style="padding-left: 40px;">{{child.name}}
								</li>
							</ul>
						</li>
					</ul>
					<el-col :span="20" class="min-right">
						  <router-view></router-view>
					</el-col>
				</el-row>
			</el-row>
	</div>
</template>

<script>
	import vHead from './../admin/common/Header.vue';
	import vSidebar from './../admin/common/Sidebar.vue';
    export default {
    	components:{
    		vHead,vSidebar
    	},
        data() {
            return {
					collapsed: false,
					menuList: [{
							"path": '1',
							"name": '系统设置',
							"iconCls": 'el-icon-setting', //图标样式class
							"children": [{
									"path": '1',
									"name": '用户管理',
									"url": "permissions/home.html"
								},
								{
									"path": '2',
									"name": '权限设置',
									"url": "user/list.html"
								},
								{
									"path": '3',
									"name": '网站设置',
									"url": "config/index.html"
								}
							]
						},
						{
							"path": '2',
							"name": '数据库管理',
							"leaf": true, //只有一个节点
							"iconCls": 'el-icon-message', //图标样式class
							"icon": 'el-icon-setting',
							"children": [{
								"path": '1',
								"name": '数据库管理',
								"url": "database/index.html"
							}]

						},
						{
							"path": '3',
							"name": '栏目管理',
							"leaf": true, //只有一个节点
							"iconCls": 'el-icon-message', //图标样式class
							"icon": 'el-icon-setting',
							"children": [{
								"path": '1',
								"name": '栏目管理',
								"url": "column/list.html"
							}]

						},
						{
							"path": '4',
							"name": '广告管理',
							"leaf": true, //只有一个节点
							"iconCls": 'el-icon-message', //图标样式class
							"icon": 'el-icon-setting',
							"children": [{
								"path": '1',
								"name": '广告管理',
								"url": "advertising/list.html"
							}]

						}, {
							"path": '5',
							"name": '新闻管理',
							"leaf": true, //只有一个节点
							"iconCls": 'el-icon-message', //图标样式class
							"icon": 'el-icon-setting',
							"children": [{
								"path": '1',
								"name": '新闻管理',
								"url": "news/list.html"
							}]
						}
					]
            }
        },
        methods: {
					showMenu: function(i, status) {
						console.log(status)
						this.$refs.menuCollapsed.getElementsByClassName('submenu-hook-' + i)[0].style.display = status ? 'block' : 'none';
					},
					getMenu:function(url){ //目录跳转
						 console.log(url)
						 document.getElementById("minWarp").src=url
						//this.$refs.minWarp.src=url;
					}
        }
    }
</script>
